<template>
  <div id="components-loading-more">
    <div class="loading-more">
      <div v-if="loadingStatus == 1">查看更多</div>
      <div v-else-if="loadingStatus == 2">加载中<span class="el-icon-loading"></span></div>
      <div v-else>已经是底部啦</div>
    </div>
  </div>
</template>

<script>
import LoadMore from '@/plugins/loading-more.js'
export default {
  // 1 查看更多
  // 2 加载中
  // 3 已经是底部啦
  props: {
    loadingStatus: {
      type: Number,
      required: true
    },
    pageSize: {
      type: Number,
      required: true
    },
    ajaxFun: {
      type: Function,
      required: true
    },
    scrollDom: {
      required: true
    },
    toLoadHeight: {
      type: Number,
      required: true
    }
  },
  mounted() {
    // 获取scrollDom,需要等dom加载好，dom加载是先子否父，所以获取不到父加载好的。用setTimeout是延迟到父dom加载完成
    setTimeout(() => {
      LoadMore.setOptions({
        pageCount: this.pageSize,
        ajaxFN: this.ajaxFun,
        //距离底部距离，可以根据场景调整
        toLoadHeight: this.toLoadHeight,
        rectHeightDom: this.scrollDom
      })
    }, 0)
  },
  beforeDestroy() {
    LoadMore.removeScroll()
  }
}
</script>

<style lang="scss">
#components-loading-more {
  .loading-more {
    margin-top: 10px;
    text-align: center;
    color: #888;
    .el-icon-loading {
      margin-left: 10px;
    }
    span {
      cursor: pointer;
      &:hover {
        color: rgb(214, 214, 214);
      }
    }
  }
}
</style>
